<template>
	<uni-popup class="uni-popup" ref="popupRef" background-color="#fff" type="bottom" :is-mask-click="true">
		<view class="popup-view">
			<view class="title-seaction">
				<uni-icons class="close-icon" type="closeempty" size="30" @click="close"></uni-icons>
				<text class="title">{{ title }}</text>
			</view>
			<view class="popup-content">
				<uni-forms class="forms-box" :modelValue="form">
					<template v-for="item in renderList" :key="item.id">
						<uni-forms-item class="forms-content" :label="item.thirdName">
							<view :class="{ 'item': true, 'goods-item__actived ': goods_actived === fourth.id }"
								v-for="fourth in item.detail" :key="fourth"
								@click.prevent.stop="goodsDetetailSelected(fourth.id)">
								{{ fourth.fourthName }} {{ '￥' + fourth.price + '.00' }}
							</view>
						</uni-forms-item>
					</template>
				</uni-forms>
			</view>
			<view class="popup-btn">
				<button class="btn" @click="addShopCar">加入购物车</button>
				<navigator :url="`/pages/components/n-settlementCenter?goodIds=${encodeURIComponent(JSON.stringify([goods_actived]))}`">
					<button class="btn">立即购买</button>
				</navigator>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { ref } from "vue"
	import { getGoodsDetail } from "@/api/http/followHeartService"
	import { Service } from "@/api/types/Service"
	import { addShopCar as addCar } from "@/api/http/shopCar"
	import showMsg from "../../../utils/showMsg"
	/**
	 * useTo: 弹出框属性，开关，暴露
	 */
	let popupRef = ref()
	let title = ref<string>('')
	let renderList = ref<Service.goodsDetailType[]>()
	const open = async ({ id, picUrl}: { id: number, picUrl: string }) => {
		let data = await getGoodsDetail(id)
		renderList.value = data || []
		
		// 将当前商品的图片地址picUrl添加到form中一并传给后端
		form.value.url = picUrl
		popupRef.value.open("bottom")
	}
	const close = () => {
		popupRef.value.close()
	}
	defineExpose({ open, title })


	
	/**
	 * useTo: 选中的部位以及价格
	 */
	let goods_actived = ref<number | null>()
	console.log("goods_actived",goods_actived)
	
	let form = ref<{ goodId : number | null, userId : number | null, url: string }>({
		goodId: null,
		userId: null,
		url: ''
	})
	const goodsDetetailSelected = (id : number | null) => {
		form.value.goodId = id
		form.value.userId = uni.getStorageSync("userId")
		goods_actived.value = id
	}
	/**
	 * @description 细节部位添加购物车 
	 */
	const addShopCar = async () => {
		await addCar({ ...form.value })
		close()
		showMsg.Toast('加入购物车成功', 'success', 2000)
	}
</script>

<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		}
	}
</script>
<style scoped lang="scss">
	:deep(.uni-popup) {
		view {
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;
		}
	}

	.popup-view {
		padding: 20rpx;
		height: 100%;

		.title-seaction {
			position: relative;
			padding-bottom: 20rpx;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			border-bottom: 1px solid #cccfd3;

			.close-icon {
				position: absolute;
				top: 2rpx;
				right: 10rpx;
				color: $uni-base-color;
			}
		}

		.popup-content {
			padding: 30rpx 0;
			padding-left: 20rpx;
			padding-bottom: 20rpx;
			height: 100%;
			max-height: 43vh;
			overflow-y: auto;
			overflow-x: hidden;
		}

		.popup-btn {
			@include flex;

			.btn,
			%btn {
				position: relative;
				width: 300rpx;
				border-radius: 50rpx;
				color: #fff;

				&:before {
					position: absolute;
					top: 0;
					left: 0;
					content: "";
					width: 100%;
					height: 100%;
					opacity: 0;
					background: rgba(0, 0, 0, .2);
					transition: opacity 0.3s linear;
				}
			}

			.btn {
				&:first-child {
					background: $uni-success;
				}

				&:last-child {
					background: $uni-primary;
				}
			}

			.btn_actived {
				@extend %btn;

				&:before {
					opacity: 1;
				}
			}
		}
	}

	// 样式穿透
	:deep(.uni-forms-item) {
		margin-bottom: 0rpx;
	}

	:deep(.uni-forms-item__content) {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.item {
			padding: 15rpx !important;
			border-radius: 15rpx;
			border: 1px solid #dadada;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.goods-item__actived {
		border-color: $uni-primary !important;
		color: $uni-primary;
	}
</style>